<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap模板</title>
    <link rel="stylesheet" href=".../css/bootstrap.min.css">
</head>

<body>
    <div class="container"><form action="" class="was-validated">
        <div class="form-group">
          <label for="uname">Username:</label>
          <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入用户名！</div>
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入密码！</div>
        </div>
        <div class="form-group form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
            <div class="valid-feedback">验证成功！</div>
            <div class="invalid-feedback">同意协议才能提交。</div>
          </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form></div>
    <br>
    <div class="container"><form action="" class="needs-validation" novalidate>
        <div class="form-group">
          <label for="uname">Username:</label>
          <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入用户名！</div>
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">请输入密码！</div>
        </div>
        <div class="form-group form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
            <div class="valid-feedback">验证成功！</div>
            <div class="invalid-feedback">同意协议才能提交。</div>
          </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
       
      <script>
      // 如果验证不通过禁止提交表单
      (function() {
        'use strict';
        window.addEventListener('load', function() {
          // 获取表单验证样式
          var forms = document.getElementsByClassName('needs-validation');
          // 循环并禁止提交
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
      </script></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>

    <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>